
const { HotModuleReplacementPlugin } = require('webpack');
const { merge } = require('webpack-merge');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackBar = require('webpackbar');

const common = require('./webpack.common.config');

console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbb')

const tsLoader = common.module.rules.find((r) => r.loader === 'ts-loader');
if (tsLoader) {
  tsLoader.options = {
    ...tsLoader.options,
    // getCustomTransformers: () => ({
    //   before: [ReactRefreshTypeScript()],
    // }),
    transpileOnly: true,
  };
}

module.exports = merge(common, {
 
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    port:8800,
    headers: { 'Access-Control-Allow-Origin': '*'},
    allowedHosts: "all",

    historyApiFallback: true,
    client: {
      overlay: {
        warnings: false,
      },
    },
    static: {
      directory: path.resolve(__dirname, '../public'),
    },
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    // new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      // filename: path.resolve(__dirname, '../dist/index.html'),
      template: path.resolve(__dirname, `../public/index.html`),
      templateParameters: {
        entryPath: `/static/entry.js`,
      },
      inject: false, // @todo 'body',
      // templateContent: {}, // function() {}
    }),
    // new CleanTerminalPlugin(),
    new WebpackBar(),
  ],
});
